<template>
  <div class="bg-white rounded-sm mb-4 py-4 px-4 items-center flex">
    <div class="flex-1 flex">
      <el-button
        type="primary"
        @click="isVisible = true"
      >
        新增菜单
      </el-button>
    </div>
    <search-tools
      :tools="['refresh']"
    />
  </div>

  <vxe-table
    :loading="loading"
    empty-text="没有更多数据了！"
    border="inner"
    :column-config="{resizable: true}"
    :data="tableData"
  >
    <vxe-column
      field="name"
      title="菜单名称"
      width="250"
    />
    <vxe-column
      field="template_class_id"
      title="菜单内容模板"
    >
      <template #default="{row}">
        {{ getClassName(row.template_class_id) }}
      </template>
    </vxe-column>
    <vxe-column
      field="status"
      title="是否启用"
      width="80"
    >
      <template #default="{ row }">
        <dict-el-tag
          :status="row.status"
          :dict-status-type="status"
        />
      </template>
    </vxe-column>
    <vxe-column
      field="createTime"
      title="发布日期"
    >
      <template #default="{ row }">
        {{ $filters.formatDate(row.createTime) }}
      </template>
    </vxe-column>
    <vxe-column
      title="操作"
      width="380"
    >
      <template #default="{ row }">
        <el-button
          v-auth="authBtn.edit"
          link
          type="primary"
          size="small"
          @click="handleEditClick(row)"
        >
          <div class="flex items-center">
            <div class="i-carbon-edit text-xl mr-1" />
            <span>修改</span>
          </div>
        </el-button>
        <el-button
          v-if="+row.template_class_id === 3"
          v-auth="authBtn.file"
          link
          size="small"
          type="info"
          @click="router.push(`/article?id=${row.id}`)"
        >
          <div class="flex items-center">
            <div class="i-mdi-android-messages text-xl" />
            <span>文章管理</span>
          </div>
        </el-button>
        <el-button
          v-if="+row.template_class_id === 1"
          v-auth="authBtn.file"
          link
          size="small"
          type="info"
          @click="handleEditContent(row)"
        >
          <div class="flex items-center">
            <div class="i-mdi-content-save-edit text-xl" />
            <span>设置菜单内容</span>
          </div>
        </el-button>
        <el-button
          v-if="+row.template_class_id === 1"
          link
          size="small"
          type="info"
          @click="handleUploadImg(row)"
        >
          <div class="flex items-center">
            <div class="i-mdi-file-image text-xl" />
            <span>设置轮播图</span>
          </div>
        </el-button>
        <el-button
          v-if="+row.template_class_id === 4"
          v-auth="authBtn.file"
          link
          size="small"
          type="info"
          @click="handleEditFile(row)"
        >
          <div class="flex items-center">
            <div class="i-mdi-paperclip-plus text-xl" />
            <span>设置文件</span>
          </div>
        </el-button>
        <el-button
          v-auth="authBtn.delete"
          link
          size="small"
          type="danger"
          @click="handleDeleteClick(row)"
        >
          <div class="flex items-center">
            <div class="i-carbon-trash-can text-xl" />
            <span>删除</span>
          </div>
        </el-button>
      </template>
    </vxe-column>
  </vxe-table>
  <el-dialog
    v-model="isVisible"
    :title="title"
    width="50%"
    :close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
    >
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item
            label="菜单名称"
            prop="name"
            :rules="{
              required: true,
              message: '菜单名称不能为空',
              trigger: 'blur',
            }"
          >
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="菜单内容模板"
            prop="template_class_id"
            :rules="{
              required: true,
              message: '菜单内容模板不能为空',
              trigger: 'blur',
            }"
          >
            <dict-el-select
              v-model="form.template_class_id"
              dict-status-type="web_menu_class"
              :placeholder="'请选择菜单内容模板'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item
            label="排序"
            prop="order"
          >
            <el-input-number
              v-model="form.order"
              :min="0"
              :max="99"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="是否启用"
            prop="status"
            :rules="{
              required: true,
              message: '请选择是否启用',
              trigger: 'blur',
            }"
          >
            <dict-el-radio
              v-model="form.status"
              dict-status-type="status"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div>
        <el-button
          @click="handleClose"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfrim"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="isContentVisible"
    title="频道内容"
    width="50%"
    :close="handleClose"
  >
    <editor
      v-model="form.menu_content"
      :height="250"
    />
    <template #footer>
      <div>
        <el-button
          @click="handleClose"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleFileConfrim"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <setting-file
    v-model="isFileVisible"
    :file-list="form.webmenu_file"
    :file_outside_url="form.file_outside_url"
    @on-confirm="onFileConfirm"
  />
  <upload-card-img
    v-model="isUploadImgVisible"
    :file-list="carousel_picture_list"
    @onConfirm="onConfirmUploadImg"
  />
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
import { useCloned } from '@vueuse/core'
import { useRouter } from 'vue-router'
import searchTools from '@/components/search-tools/index.vue'
import { getDict, getDictLabel } from '@/utils/dict'
import { WebMenu as WebMenuApi } from '@/api/webmenu'
import notification from '@/utils/dict-notification'
import useAuthBtn from '@/utils/useAuthBtn'
import settingFile from '@/components/setting-file/index.vue'

const router = useRouter()
const authBtn = useAuthBtn()
const loading = ref(false)
const tableData = ref([])
const isVisible = ref(false)
const isFileVisible = ref(false)
const isContentVisible = ref(false)
const isUploadImgVisible = ref(false)
const carousel_picture_list = ref([2])
const selectMenu = ref({})

const form = ref({
  status: 1,
})
const formRef = ref(null)

const editorRef = shallowRef()

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null)
    return
  editor.destroy()
})

const title = computed(() => {
  if (form.value.id)
    return '新增网站菜单'
  else
    return '修改菜单信息'
})

const getClassName = computed(() => {
  return (type) => {
    const dict = getDict('web_menu_class')
    return getDictLabel(dict, type)
  }
})

const getMenuList = async () => {
  loading.value = true
  const data = await WebMenuApi.getAllWebMenu()
  tableData.value = data
  loading.value = false
}

const getContent = async () => {
  const { menu_content = '' } = await WebMenuApi.getContent({ id: form.value.id })
  form.value.menu_content = menu_content
}

onMounted(async () => {
  form.value.status = 1
  await getMenuList()
})

const handleDeleteClick = async (row) => {
  const { code, message } = await WebMenuApi.deleteWebMenu(row.id)
  notification(code, message).then(async () => {
    await getMenuList()
  })
}

const handleEditClick = (row) => {
  isVisible.value = true
  const { cloned } = useCloned(row)
  form.value = cloned.value
}

const handleClose = () => {
  isVisible.value = false
  isFileVisible.value = false
  isContentVisible.value = false
  form.value = {
    status: 1,
  }
}

const addOrEditMenu = async (row) => {
  const { code, message } = await WebMenuApi.addOrEdit(row)
  notification(code, message).then(async () => {
    await getMenuList()
  })
}

const handleEditFile = (row) => {
  isFileVisible.value = true
  const { cloned } = useCloned(row)
  form.value = cloned.value
}

const handleEditContent = (row) => {
  isContentVisible.value = true
  const { cloned } = useCloned(row)
  form.value = cloned.value
}

const handleConfrim = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      await addOrEditMenu(form.value)
      handleClose()
    }
  })
}

const handleFileConfrim = async () => {
  await addOrEditMenu(form.value)
  handleClose()
}

const onFileConfirm = async (val) => {
  form.value.file_id = val.file_id
  form.value.file_outside_url = val.file_outside_url
  await addOrEditMenu(form.value)
}

const getCarouselPicture = async (row) => {
  const { carousel_picture } = await WebMenuApi.getCarouselPicture({ id: row.id })
  carousel_picture_list.value = carousel_picture
}

const handleUploadImg = async (row) => {
  await getCarouselPicture(row)
  selectMenu.value = row
  isUploadImgVisible.value = true
}

const onConfirmUploadImg = async (val) => {
  const { code, message } = await WebMenuApi.updateCarouselPicture({ carousel_picture_id: val.join(), id: selectMenu.value.id })
  notification(code, message)
}
watch(isContentVisible, async (val) => {
  if (val && form.value.id)
    await getContent()
})
</script>
